<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 枚举列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <style>
        .fa {
            font-size: 13px;
            width: 15px;
        }
        table tr{ height:40px;}
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li><a>基本设置</a></li>
                            <li><a>枚举列表</a></li>
                        </ol>
                    </div>
                    <div class="content-wrapper">
                        <div class="search-condition">
                            <div>
                                <div class="filter-wrapper">
                                    <ul class="clearfix">
                                        <li class="filter-item ">
                                            <label>枚举编码</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>枚举名称</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item">
                                            <a class="revision-btn revision-btn-search">搜索</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info" style="margin-bottom: 0px">
                                <a class="revision-btn" v-on:click="addShow()">新增</a>
                                <a class="revision-btn-export" v-on:click="lookShow()">导入</a>
                                <span>总条数:<span>12 条</span>
                            </div>
                        </div>
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>枚举名称</th>
                                    <th>枚举编码</th>
                                    <th>枚举值</th>
                                    <th>排序</th>
                                    <th>创建时间</th>
                                    <th>创建人</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in List" v-bind:data-index="$index">
                                    <td v-if="item.ParentId==0"><i class="fa fa-plus-square" v-on:click="detailShow(this)"></i>{{item.Name}}</td>
                                    <td v-else>{{item.Name}}</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">{{item.Code}}</a></td>
                                    <td class="text-navy">{{item.Value}}</td>
                                    <td>{{item.Sort}}</td>
                                    <td>{{item.CreatedOn}}</td>
                                    <td>{{item.Creater}}</td>
                                    <td class="text-navy">{{item.Status}}</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="addInfo(this)" v-if="item.ParentId==0">新增子项</a>
                                        <a href="javascript:;" v-on:click="edit(item)">编辑</a>
                                        <a href="javascript:;" v-on:click="delete(item)">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="clearfix page-wrap">
                            <pagination v-bind:data-total="pageObj.dataTotal" v-bind:page-number.sync="pageObj.pageNumber" v-bind:page-size="pageObj.pageSize" v-bind:data-number.sync="pageObj.dataNumber" v-bind:ajax-obj="pageObj.ajaxObj"></pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 新增弹框 -->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                    <h4 slot="header">新增员工信息</h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                            <div>
                                <h3 class="panel-title">员工信息</h3>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-4">
                                    <input id="firstname" name="firstname" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">员工姓名</label>
                                <div class="col-sm-4">
                                    <input id="lastname" name="lastname" class="form-control" type="text" aria-required="true"
                                        aria-invalid="false">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-4">
                                    <div class="radio radio-info radio-inline">
                                        <input type="radio" id="inlineRadio1" value="option1" name="radioInline"
                                            checked="">
                                        <label for="inlineRadio1"> 男</label>
                                    </div>
                                    <div class="radio radio-inline">
                                        <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
                                        <label for="inlineRadio2"> 女</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">登录密码</label>
                                <div class="col-sm-4">
                                    <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">确认密码</label>
                                <div class="col-sm-4">
                                    <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">手机号</label>
                                <div class="col-sm-4">
                                    <input id="password" name="password" class="form-control" type="text">
                                </div>
                                <!-- <button type="button" class="btn btn-outline btn-default" v-on:click="modPhoneShow()">绑定手机号</button> -->
                                <a class="revision-btn-default-send">绑定手机</a>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-4">
                                    <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                                </div>
                                <!-- <button type="button" style="width: 98px;" class="btn btn-outline btn-default">绑定邮箱</button> -->
                                <a class="revision-btn-default-send">绑定邮箱</a>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-4">
                                    <textarea id="ccomment" name="comment" class="form-control" required=""
                                        aria-required="true"></textarea>
                                </div>
                            </div>
                        </form>
                        <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                            <div>
                                <h3 class="panel-title">权限分配</h3>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label tooltip-demo">角色
                                    <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                        title="" data-original-title="该客户的唯一编码,系统自动生成"></label>
                                </label>
                                <div class="col-sm-4" style="margin-top: 7px;">
                                    <a href="" class="">管理员</a>
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label tooltip-demo">关联仓库
                                    <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                        title="" data-original-title="该客户的唯一编码,系统自动生成"></label>
                                </label>
                                <div class="col-sm-4">
                                    <div class="checkbox checkbox-success" style="float: left;width: 144px;">
                                        <input id="checkbox2" type="checkbox"><label for="checkbox2"> #A仓</label>
                                    </div>
                                    <div class="checkbox checkbox-success">
                                        <input id="checkbox3" type="checkbox"><label for="checkbox3"> #B仓</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label tooltip-demo">价格权限</label>
                                </label>
                                <div class="checkbox checkbox-success" style="float: left;margin-left: 15px;">
                                    <input id="checkbox4" type="checkbox"><label for="checkbox4"> 零售价</label>
                                </div>
                                <div class="checkbox checkbox-success" style="float: left;">
                                    <input id="checkbox5" type="checkbox"><label for="checkbox5"> 批发价</label>
                                </div>
                                <div class="checkbox checkbox-success" style="float: left;">
                                    <input id="checkbox6" type="checkbox"><label for="checkbox6"> 参考进货价</label>
                                </div>
                                <div class="checkbox checkbox-success" style="float: left;">
                                    <input id="checkbox7" type="checkbox"><label for="checkbox7"> 最低售价</label>
                                </div>
                                <div class="checkbox checkbox-success" style="float: left;">
                                    <input id="checkbox8" type="checkbox"><label for="checkbox8"> 成本价</label>
                                </div>
                                <div class="checkbox checkbox-success" style="float: left;">
                                    <input id="checkbox9" type="checkbox"><label for="checkbox9"> 等级价 </label>
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label tooltip-demo">其他</label>
                                </label>
                                <div class="col-sm-10">
                                    <div class="checkbox checkbox-success">
                                        <input id="checkbox10" type="checkbox"><label for="checkbox10"> 查看他人单据</label>
                                        <span class="title-tips"><span>* </span>勾选后，可以查看他人经手的单据。</span>
                                    </div>
                                    <div class="checkbox checkbox-success">
                                        <input id="checkbox11" type="checkbox"><label for="checkbox11"> 作废他人单据 </label>
                                        <span class="title-tips"><span>* </span>勾选后，可以作废他人经手的单据。</span>
                                    </div>
                                    <div class="checkbox checkbox-success">
                                        <input id="checkbox12" type="checkbox"><label for="checkbox12"> 查看他人客户 </label>
                                        <span class="title-tips"><span>* </span>勾选后，可以查看关联他人的客户和客户应收欠款，开单时也可以选择关联他人的客户</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">
                                    <div class="tooltip-demo">用户名
                                        <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                            title="" title="用户名用于系统登录的账号"></label>
                                    </div>
                                </label>
                                <div class="col-sm-4">
                                    <div class="radio radio-info radio-inline">
                                        <input type="radio" id="inlineRadio1" value="option1" name="radioInline"
                                            checked="">
                                        <label for="inlineRadio1"> 正常</label>
                                    </div>
                                    <div class="radio radio-inline">
                                        <input type="radio" id="inlineRadio2" value="option2" name="radioInline">
                                        <label for="inlineRadio2"> 锁定</label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </modal>
                <!-- 更改手机号 -->
                <modal v-bind:show.sync="modPhoneModal.show" v-bind:style="modPhoneModal .style" v-bind:add-class="modPhoneModal.addClass">
                    <h4 slot="header">绑定手机号<span class="title-tips">绑定后可当作用户名登录</span></h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">新手机号</label>
                                <div class="col-sm-4">
                                    <input id="firstname" name="firstname" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">手机验证码</label>
                                <div class="col-sm-4">
                                    <input id="firstname" name="firstname" class="form-control" type="text">
                                </div><button type="button" class="btn btn-outline btn-default">获取验证码</button>
                            </div>
                        </form>
                    </div>
                </modal>
            </div>
        </div>
        <script src="../content/js/lib/vue/vue.min.js"></script>
        <script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
        <script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
        <script src="../content/static/js/plugins/switchery/switchery.js"></script>
        <script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="../content/static/js/content.min.js?v=1.0.0"></script>
        <script src="../content/js/lib/vue/vue-modal.js"></script>
        <script src="../content/js/lib/vue/vue-pagination.js"></script>
        <script src="../content/js/common.js"></script>
        <script src="../content/static/js/plugins/iCheck/icheck.min.js"></script>
        <script src="../content/js/lib/vue/select2.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".i-checks").iCheck({
                    checkboxClass: "icheckbox_square-green",
                    radioClass: "iradio_square-green",
                });
            });
            $("#role").select2({
                width: "160px"
            });
            var vmData = {
                addModal: {
                    show: false,
                    style: {
                        width: '780px',
                        height: "auto"
                    },
                    addClass: 'scroll-modal',
                    func: {
                        type: Function
                    },
                    close: function () {
                        vm.addModal.show = false;
                    }
                },
                modPhoneModal: {
                    show: false,
                    style: {
                        width: '780px',
                        height: "260px"
                    },
                    func: {
                        type: Function
                    },
                    close: function () {
                        vm.modPhoneModal.show = false;
                    }
                },
                List:
                [
                    {
                        "Id":"1",
                        "Name":"单据类型",
                        "Code":"Psi_ReceiptType",
                        "Value":"",
                        "Sort":"1",
                        "CreatedOn":"2019-01-15 12:39:57",
                        "Creater":"张三",
                        "Status":"正常",
                        "ParentId":0,
                        "detail":[
                            {
                            "Id":"998",
                            "Name":"销售单",
                            "Code":"Psi_ReceiptType",
                            "Value":"1",
                            "Sort":"1",
                            "CreatedOn":"2019-01-15 12:39:57",
                            "Creater":"张三",
                            "Status":"正常",
                            "ParentId":1,
                            },
                            {
                                "Id":"997",
                                "Name":"进货单",
                                "Code":"Psi_ReceiptType",
                                "Value":"",
                                "Sort":"2",
                                "CreatedOn":"2019-01-15 12:39:57",
                                "Creater":"张三",
                                "Status":"正常",
                                "ParentId":1,
                            },
                        ],
                    },
                    {
                        "Id":"2",
                        "Name":"客户等级",
                        "Code":"Psi_CustomerType",
                        "Value":"",
                        "Sort":"2",
                        "CreatedOn":"2019-01-15 12:39:57",
                        "Creater":"张三",
                        "Status":"正常",
                        "ParentId":0,
                        "detail":[
                            {
                                "Id":"3",
                                "Name":"普通级别",
                                "Code":"客户等级",
                                "Value":"1",
                                "Sort":"3",
                                "CreatedOn":"2019-01-15 12:39:57",
                                "Creater":"张三",
                                "Status":"正常",
                                "ParentId":2,
                            },
                        ]
                    },
                    {
                        "Id":"3",
                        "Name":"供应商等级",
                        "Code":"Psi_SupplierType",
                        "Value":"",
                        "Sort":"3",
                        "CreatedOn":"2019-01-15 12:39:57",
                        "Creater":"张三",
                        "Status":"正常","ParentId":0,
                        "detail":[
                            {
                                "Id":"307",
                                "Name":"普通级别",
                                "Code":"客户等级",
                                "Value":"1",
                                "Sort":"3",
                                "CreatedOn":"2019-01-15 12:39:57",
                                "Creater":"张三",
                                "Status":"正常",
                                "ParentId":3,
                            },
                        ]
                    },
                    {
                        "Id":"4",
                        "Name":"审核状态",
                        "Code":"Psi_ApprovalStatus",
                        "Value":"",
                        "Sort":"4",
                        "CreatedOn":"2019-01-15 12:39:57",
                        "Creater":"张三",
                        "Status":"正常","ParentId":0,
                        "detail":[
                            {
                                "Id":"304",
                                "Name":"普通级别",
                                "Code":"客户等级",
                                "Value":"1",
                                "Sort":"3",
                                "CreatedOn":"2019-01-15 12:39:57",
                                "Creater":"张三",
                                "Status":"正常",
                                "ParentId":4,
                            },
                        ]
                    },
                    {
                        "Id":"5",
                        "Name":"销售类型",
                        "Code":"Psi_SaleType",
                        "Value":"",
                        "Sort":"5",
                        "CreatedOn":"2019-01-15 12:39:57",
                        "Creater":"张三",
                        "Status":"正常","ParentId":0,
                        "detail":[
                            {
                                "Id":"301",
                                "Name":"普通级别",
                                "Code":"客户等级",
                                "Value":"1",
                                "Sort":"3",
                                "CreatedOn":"2019-01-15 12:39:57",
                                "Creater":"张三",
                                "Status":"正常",
                                "ParentId":5,
                            },
                        ]
                    },
                ],
                detailList:[],
            };
            vmData = $.extend(vmData, baseData);
            var vmMothod = {
                init: function () {
                   // add:addInfo();
                },
                addShow: function () {
                    vm.addModal.show = true;
                },
                modPhoneShow: function () {
                    vm.modPhoneModal.show = true;
                },
                addInfo:function(e){
                    debugger;
                },
                detailShow:function(e){
                    if($(e.$event.currentTarget).hasClass("fa fa-plus-square")){ //收
                        $(e.$event.currentTarget).addClass("fa fa-minus-square");
                        $(e.$event.currentTarget).removeClass(".fa fa-plus-square");
                        // //显示详情
                        for (let i = 0; i <  e.item.detail.length; i++) {
                            vm.List.splice(e.$index+1,0,e.item.detail[i]);
                        }
                    }
                    else{//缩
                        $(e.$event.currentTarget).addClass("fa fa-plus-square");
                        $(e.$event.currentTarget).removeClass(".fa fa-minus-square");
                        //隐藏详情
                        for (let j = 0; j <  e.item.detail.length; j++) {
                            for  (let i = 0; i <  vm.List.length; i++) {
                                if(vm.List[i].Id==e.item.detail[j].Id){
                                    vm.List.splice(i,1);
                                }
                            }
                        }
                    }
                },
            };
            vmMothod = $.extend(vmMothod);
            var vm = new Vue({
                el: '.content-container',
                data: vmData,
                methods: vmMothod
            });
            vm.init();
        </script>
</body>

</html>